<template>
	<scroll-view class="scrollarea" scroll-y type="list">
		<view class="container">
			<!-- 发帖表单 -->
			<view class="create-post-form">
				<view class="form-section">
					<text class="form-label">选择分类</text>
					<view class="category-selector">
						<view 
							class="category-item" 
							v-for="category in categories" 
							:key="category.id"
							:class="{ active: selectedCategory === category.id }"
							@tap="selectCategory"
							:data-category-id="category.id"
						>
							<text class="category-name">{{ category.name }}</text>
						</view>
					</view>
				</view>
				
				<view class="form-section">
					<text class="form-label">帖子标题</text>
					<input 
						class="form-input" 
						placeholder="请输入帖子标题" 
						v-model="postTitle"
						maxlength="50"
					/>
					<text class="char-count">{{ postTitle.length }}/50</text>
				</view>
				
				<view class="form-section">
					<text class="form-label">帖子内容</text>
					<textarea 
						class="form-textarea" 
						placeholder="分享你的想法、问题或经验..." 
						v-model="postContent"
						maxlength="1000"
					></textarea>
					<text class="char-count">{{ postContent.length }}/1000</text>
				</view>
				
			</view>
			
			<!-- 发布按钮 -->
			<view class="publish-section">
				<view class="publish-btn" @tap="publishPost" :class="{ disabled: !canPublish }">
					<text class="publish-btn-text">发布帖子</text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { getCategories, addPost } from '@/api/forum.js'
	
	export default {
		data() {
			return {
				categories: [],
				selectedCategory: null,
				postTitle: '',
				postContent: '',
				publishNow: true,
				loading: false
			}
		},
		computed: {
			canPublish() {
				return this.selectedCategory && 
					   this.postTitle.trim() && 
					   this.postContent.trim() && 
					   !this.loading;
			}
		},
		onLoad: function() {
			console.log('发帖页面加载');
			this.loadCategories();
		},
		methods: {
			// 加载分类数据
			loadCategories: function() {
				getCategories().then(res => {
					console.log('分类数据:', res);
					if (res.data && Array.isArray(res.data)) {
						this.categories = res.data;
						// 默认选择第一个分类
						if (this.categories.length > 0) {
							this.selectedCategory = this.categories[0].id;
						}
					} else {
						// 如果API失败，使用默认分类
						this.categories = [
							{ id: 1, name: '学习交流' },
							{ id: 2, name: '生活分享' },
							{ id: 3, name: '技术讨论' },
							{ id: 4, name: '校园活动' },
							{ id: 5, name: '求助问答' }
						];
						this.selectedCategory = 1;
					}
				}).catch(err => {
					console.error('加载分类失败:', err);
					// 使用默认分类
					this.categories = [
						{ id: 1, name: '学习交流' },
						{ id: 2, name: '生活分享' },
						{ id: 3, name: '技术讨论' },
						{ id: 4, name: '校园活动' },
						{ id: 5, name: '求助问答' }
					];
					this.selectedCategory = 1;
				});
			},
			// 选择分类
			selectCategory: function(e) {
				const categoryId = parseInt(e.currentTarget.dataset.categoryId);
				this.selectedCategory = categoryId;
			},
			// 发布帖子
			publishPost: function() {
				if (!this.canPublish) {
					uni.showToast({
						title: '请完善帖子信息',
						icon: 'none'
					});
					return;
				}
				
				this.loading = true;
				
				const postData = {
					title: this.postTitle.trim(),
					content: this.postContent.trim(),
					userId: 1, // 这里应该获取当前用户ID
					categoryId: this.selectedCategory,
					status: 1 // 直接发布
				};
				
				addPost(postData).then(res => {
					console.log('发帖结果:', res);
					if (res.data === '添加成功') {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						});
						
						// 延迟返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
					this.loading = false;
				}).catch(err => {
					console.error('发帖失败:', err);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
					this.loading = false;
				});
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f8fafc;
	}

	.scrollarea {
		flex: 1;
	}

	.container {
		padding: 20px;
		padding-bottom: 120px;
		min-height: 100vh;
	}

	/* 发帖表单样式 */
	.create-post-form {
		background: white;
		border-radius: 20px;
		padding: 24px;
		margin-bottom: 20px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(0, 0, 0, 0.05);
	}

	.form-section {
		margin-bottom: 24px;
	}

	.form-section:last-child {
		margin-bottom: 0;
	}

	.form-label {
		font-size: 16px;
		font-weight: 700;
		color: #1f2937;
		margin-bottom: 12px;
		display: block;
	}

	/* 分类选择器样式 */
	.category-selector {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.category-item {
		flex: 0 0 calc(33.333% - 2px);
		max-width: calc(33.333% - 2px);
		padding: 12px 16px;
		border-radius: 20px;
		background: #f8fafc;
		border: 2px solid #e5e7eb;
		transition: all 0.3s ease;
		text-align: center;
	}

	.category-item.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-color: transparent;
		box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
		transform: translateY(-2px);
	}

	.category-name {
		font-size: 14px;
		font-weight: 600;
		color: #6b7280;
	}

	.category-item.active .category-name {
		color: white;
	}

	/* 输入框样式 */
	.form-input {
		width: calc(100% - 32px);
		height: 40px;
		padding: 8px 12px -3px 10px;
		border: 2px solid #e5e7eb;
		border-radius: 12px;
		font-size: 16px;
		color: #1f2937;
		background: #f8fafc;
		transition: all 0.3s ease;
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		line-height: 1.5;
	}

	.form-input:focus {
		border-color: #667eea;
		background: white;
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
	}

	.form-textarea {
		width: calc(100% - 12px);
		min-height: 200px;
		padding: 16px;
		border: 2px solid #e5e7eb;
		border-radius: 12px;
		font-size: 16px;
		color: #1f2937;
		background: #f8fafc;
		transition: all 0.3s ease;
		resize: none;
		box-sizing: border-box;
	}

	.form-textarea:focus {
		border-color: #667eea;
		background: white;
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
	}

	.char-count {
		font-size: 12px;
		color: #9ca3af;
		text-align: right;
		margin-top: 8px;
		display: block;
	}


	/* 发布按钮样式 */
	.publish-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 16px 20px;
		border-top: 1px solid #e5e7eb;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
	}

	.publish-btn {
		width: 100%;
		height: 50px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
	}

	.publish-btn:active {
		transform: scale(0.98);
	}

	.publish-btn.disabled {
		background: #d1d5db;
		box-shadow: none;
		opacity: 0.6;
	}

	.publish-btn-text {
		font-size: 16px;
		font-weight: 700;
		color: white;
	}

	.publish-btn.disabled .publish-btn-text {
		color: #9ca3af;
	}
</style>

